<template>
    <div class="flex justify-center items-center w-full bg-blue-400" style="height: 100vh;">
        <div class="flex bg-light-600 overflow-hidden p-7 w-96" style="border-radius: 5px;">
            <!-- <div class="flex-1">
                <img src="../assets/img/login.png" alt="" class="w-full">
            </div> -->
            <div class="flex-1 flex justify-center items-center">
                <el-form :model="loginForm" class="w-70 min-w-70" :role="roles" ref="formRef">
                    <div class="text-center text-2xl font-bold m-5">欢迎登录医院管理系统</div>
                    <el-form-item prop="username">
                        <el-input placeholder="请输入用户名" v-model="loginForm.username" class="h-8">
                            <template #prefix> <el-icon><User/></el-icon> </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" v-model="loginForm.password" show-password>
                            <template #prefix> <el-icon><Lock/></el-icon> </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha">
                        <div class="flex justify-between">
                            <el-input placeholder="请输入验证码" v-model="loginForm.captcha" class="w-2/3"/>
                            <el-image class="w-1/3 h-8 cursor-pointer" :src="captchaPath" @click="getCaptcha()"/>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" class="w-full" @click.prevent="handleLogin()">
                            <span v-if="!loading">登 录</span>
                            <span v-else>登录中...</span>
                        </el-button>
                    </el-form-item>
                    <div class="flex justify-between items-center h-6 mb-2">
                        <el-radio-group v-model="radio">
                            <el-radio value="0">用户</el-radio>
                            <el-radio value="1">管理员</el-radio>
                            <el-radio value="2">医生</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="flex" v-if="radio == '0'">
                        <div class="flex-2 ">还没有账号？请<span class="text-blue-400 cursor-pointer" @click="toRegister()">注册</span></div>
                        <div class="flex-1 text-right text-blue-400 cursor-pointer">忘记密码</div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import { getCaptchaImg, login, checkToken } from '@/api/sys/login'
import { ElNotification } from 'element-plus';
import {useCookies} from '@vueuse/integrations/useCookies';
import { useRouter } from "vue-router";
// 使用store
import { userDateStore } from "@/stores/user";
const userStore = userDateStore()
const router = useRouter();
// 加载前，获取验证码
getCaptcha()

// 获取验证码
function getCaptcha() {
    getCaptchaImg().then(res => {
        // console.log(res)
        captchaPath.value = res.data.captcha
        loginForm.uuid = res.data.uuid
    })
}

// 数据区
const loginForm = reactive({
    username:'',
    password:'',
    captcha: '',
    uuid: '',
    type: 0
})
loginForm.username = 'admin'
loginForm.password = '123456'
const radio  = ref('0')
// 验证码
const captchaPath = ref('') 
// 正在加载
const loading = ref(false)
// 表单验证
const formRef = ref(null);

// 查验姓名和密码
const roles = {
    username: [
        { required: true, message: '不能为空', trigger: 'blur' },
    { min: 3, max: 5, message: '长度为3-5字符', trigger: 'blur' },
],
    password: [{
         required: true, message: '不能为空', trigger: 'blur' 
    },{ min: 3, max: 5, message: '长度为3-5字符', trigger: 'blur' },]
}

// 登录提交
function handleLogin(){
    formRef.value.validate((valid) => {
        if(valid){
            loading.value = true
            loginForm.type = radio.value
            login(loginForm).then(res => {
                loading.value = false
                if(res.code === 200){
                    ElNotification({
                        title:'登录成功',
                        message:'欢迎回来',
                        type:'success',
                        duration:2000
                    })
                    const cookie = useCookies();
                    cookie.set('token',res.data.token)
                    // 验证token
                    checkToken().then(res => {
                        if(res.code === 200 && res.status == 'ok'){
                            // 跳转
                            router.push('/')
                        }else{
                            ElNotification({
                                title:'登录失败',
                                message:res.msg,
                                type:'error',
                                duration:2000
                            })
                        }
                    }).catch(()=>{
                        ElNotification({
                            title:'登录失败',
                            message:'服务器异常',
                            type:'error',
                            duration:2000
                        })
                        getCaptcha()
                        loading.value = false
                    })
                    // 存到cookie中
                    cookie.set('type',res.type)
                    console.log(cookie.get('type'))
                }
            })
        }
    })
}
// 进行注册
function toRegister(){
    // 进行跳转
    console.log('跳转')
    router.push('/registerX')
}

</script>

<style scoped>
</style>